<h1>
 <img src="<%= @conferencia.cargarImagen() %>" class="img-thumbnail" style="border-radius: 5%; height:60px;"/>
 <%= @conferencia.nombre %>
</h1>

<h2><span class="glyphicon glyphicon-time"/>&nbsp;Planificar</h2>
<br/>
<% if @conferencia.sePuedeCerrarPlanificacion()%> 
	<form method="GET" action ="/listaConferencia">
		<input type="submit" value="Cerrar Planificacion"  class="btn btn-success" onclick="cerrarPlanificacion(this, <%= @conferencia.id %>)">	
	</form>
<% end %>

  <% if @message != nil %>
	<p class="alert alert-danger text-danger"><%= @message %></p>
  <% end %>

<div class="row">
	<% @conferencia.diasDeDuracion.times do | numeroDia | %>
		<div class="col-md-4">
			<div class="panel panel-primary">
				<div class="panel-heading">
			  		<h4><small>Día <%= numeroDia+1 %></small> <%= @conferencia.fechaParaDia(numeroDia) %></h4>
			  	</div>
				<div class="panel-body">
				  <form class="form" id="form_dia_<%= numeroDia %>" method="post" action="/agendar/<%= numeroDia %>">	
					<input type="hidden" name="idConferencia" value="<%= @conferencia.id %>">
					
					<div class="">
						<select name="SelectLeft" class="form-control" id="charla" style="width:72.5%" placeholder="Charla">
							<option value="Charla" selected disabled>Charla</option>
					  		<% @charlasAceptadasPendientePlanificacion.each do |charla| %>
					    		<option value="<%= charla.id %>"><%= charla.titulo%></option>
							<% end %>
						</select>
						<input type="submit" value="Agendar" class="btn btn-primary" style="float:right;"/>
					</div>
			
					<br/>
					
					<ul class="list-inline">
						<li style="width: 35%;">
				    	  <div class="input-group input-group-sm" >
				    		<span class="input-group-addon">De</span>
				            <input id="timepicker<%= numeroDia%>_1" name="fechaInicio" type="text" class="form-control timepicker" placeholder="9:30">
				          </div>
				        </li>
				        <li style="width: 35%;">
				          <div class="input-group input-group-sm">
				            <span class="input-group-addon">a</span>
				            <input id="timepicker<%= numeroDia%>_2" name="fechaFin" type="text" class="form-control timepicker" placeholder="10:30">	            
				     	  </div> 
				 		</li>
				 	</ul>
					<script type="text/javascript">
				        function configureTimePicker(inputName) {
				        	$(inputName).timepicker({
								showPeriod: true,
								showLeadingZero: true,
								hourText: 'Horas',
			                    minuteText: 'Minutos'
							});	
				        }
				        configureTimePicker('#timepicker<%= numeroDia%>_1');
				        configureTimePicker('#timepicker<%= numeroDia%>_2');
				    </script>
				  </form>
				</div>
			
				<table class="table">
				  <% @charlasAceptadasConPlanificacion[numeroDia].each do |charla| %>
					<form id="form_<%= numeroDia %>_<%= charla.id%>" method="post" action="/desagendar/<%= charla.id%>">
					  <tr>
					    <td><span class="badge" style="float: left;">
						  <%= Charla.convertirMinutesToHourString(charla.horarioInicio) %> - <%= Charla.convertirMinutesToHourString(charla.horarioFin) %></span>
						</td>
						<td><%= charla.titulo%> </td>
						<td><a class="close" data-dismiss="alert" onclick="$('#' + 'form_<%= numeroDia %>_<%= charla.id%>').submit()">×</a></td>
				  	  </tr>
				    </form>
				  <% end %>
				</table>
			</div>
		</div>
	<%end%>
</div>

<form method="GET" action ="/listaConferencia">
	<input type="submit" value="Volver" class="btn btn-default"/>
</form>

<script type="text/javascript">
	function cerrarPlanificacion(button, idConferencia) {
		button.form.method = 'get'
		button.form.action = '/cerrarPlanificacion/' + idConferencia
		return true
	}
</script>